import defaultSettings from '@/settings'
import { useDynamicTitle } from '@/utils/dynamicTitle'
import { useDark } from '@vueuse/core'
import { useSetting } from '@/layout/hooks/useSetting.js'

const { themeConfig } = useSetting();

const isDark = useDark()

const useSettingsStore = defineStore(
  'settings',
  {
    state: () => ({
      title: '',
      theme: defaultSettings.theme || '#409EFF',
      sideTheme: defaultSettings.sideTheme || 'theme-dark' ,
      showSettings: defaultSettings.showSettings,
      topNav: defaultSettings.topNav ,
      tagsView: defaultSettings.tagsView ,
      fixedHeader: defaultSettings.fixedHeader ,
      sidebarLogo: defaultSettings.sidebarLogo,
      dynamicTitle: defaultSettings.dynamicTitle,
      isDark: isDark.value,
      //==========新增属性===========================================
      themeConfig
    }),
    actions: {
      // 修改布局设置
      changeSetting(data) {
        const { key, value } = data
        if (this.hasOwnProperty(key)) {
          this[key] = value
        }
      },
      // 设置网页标题
      setTitle(title) {
        this.title = title
        useDynamicTitle();
      },
      // 修改主题里配置
      changeThemeConfig(data) {
        const { key, value } = data
        if (this.themeConfig.hasOwnProperty(key)) {
          this.themeConfig[key] = value
        }
        // 本地保存一份
        localStorage.setItem('layout-themeConfig', JSON.stringify(this.themeConfig))
      },
    }
  })

export default useSettingsStore
